<template>
	<view>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action text-gray">
				收货地址
			</view>
		</view>
		<view class="margin-bottom bg-white">
			<view class="padding">
				<view class="flex align-center ">
					<view class="flex-sub">
						{{order.address_name}}
					</view>
					<view>{{order.address_phone}}</view>
				</view>
				<view class="text-grey text-sm padding-tb-sm">{{order.address}}</view>
			</view>
		</view>

		<view class="cu-bar bg-white solid-bottom">
			<view class="action text-gray">
				商品
			</view>
		</view>
		<view class="cu-list menu-avatar" v-if="order.goods">
			<view class="cu-item" @click="toGoods(item.id)">
				<image class="cu-avatar lg" :src="order.goods.pic[0]" mode="aspectFill"></image>
				<view class="content flex-sub">
					<view class="text-cut">{{order.goods.title}}</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-price text-lg">{{order.goods.price}}</view>
						<view>x1</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white solid-top">
			<view class="action text-gray">
				商品总金额
			</view>
			<view class="action text-price text-red text-xl">
				{{order.amount}}
			</view>
		</view>
		<view class="margin-top" v-if="order.coupon_user_id">
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">
						<text class="text-grey">优惠券</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white solid-top padding-lr cu-form-group" v-if="order.remark">
			<view>备注</view>
			<view>{{order.remark}}</view>
		</view>

		<view class="margin-top">
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">
						<text class="text-grey">订单号</text>
					</view>
					<view class="action">{{order.order_no}}</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="text-grey">订单状态</text>
					</view>
					<view class="action">
						<text v-if="order.status == 0" class="text-red">待付款</text>
						<text v-if="order.status == 1" class="text-blue">待发货</text>
						<text v-if="order.status == 2" class="text-cyan">待收货</text>
						<text v-if="order.status == 3" class="text-orange">待评价</text>
						<text v-if="order.status == 4" class="text-green">已完成</text>
						<text v-if="order.status == 9" class="text-grey">已取消</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="text-grey">下单时间</text>
					</view>
					<view class="action">{{order.created_at}}</view>
				</view>
				<view class="cu-item" v-if="order.pay_time">
					<view class="content">
						<text class="text-grey">支付时间</text>
					</view>
					<view class="action">{{order.pay_time}}</view>
				</view>
			</view>
		</view>
		<view class="foot-but-h"></view>
		<view class="foot-but" v-if="order.status < 4">
			<view class="text-right">
				<view v-if="order.status == 0">
					<view class="cu-btn text-gray margin-right" @click="cancel(order.id)">
						取消订单
					</view>
					<view @click="payOrder(order.id)" class="cu-btn bg-red">
						立即支付
					</view>
				</view>
				<view v-else-if="order.status == 1">
					<view @click="remind(order.id)" class="cu-btn bg-blue">
						提醒发货
					</view>
				</view>
				<view v-else-if="order.status == 2">
					<view class="cu-btn bg-cyan">
						查看物流
					</view>
				</view>
				<view v-else-if="order.status == 3">
					<navigator hover-class="none" :url="'/pages/goods/comment/add?order_id='+order.id"
						class="cu-btn bg-orange">
						立即评价
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import OrderApi from "@/api/order"
	export default {
		data() {
			return {
				order: {},
			}
		},
		onLoad: function(option) {
			if (option.id) {
				this.loadData(option.id);
			}
		},
		methods: {
			loadData(id) {
				OrderApi.get(id).then((res) => {
					this.order = res
				})
			},
			toGoods(id) {
				uni.navigateTo({
					url: '/pages/goods/goods?id=' + id
				});
			},
			cancel(id) {
				OrderApi.cancel(id).then((res) => {
					this.loadData()
				})
			},
			remind(id) {
				uni.showToast({
					title: "已提醒发货，请耐心等待",
					duration: 2000,
					icon: "none"
				});
			},
			payOrder(id) {
				OrderApi.pay(id).then((res) => {
					this.onPay(res)
				})
			},
			onPay(jsSdk) {
				UserApi.jssdk({
					url: window.location.href
				}).then((res) => {
					jWeixin.config({
						debug: false,
						appId: res.appId, // 必填，公众号的唯一标识
						timestamp: res.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.nonceStr, // 必填，生成签名的随机串
						signature: res.signature, // 必填，签名
						jsApiList: res.jsApiList // 必填，需要使用的JS接口列表
					});
					jWeixin.ready(() => {
						jWeixin.chooseWXPay({
							timestamp: jsSdk.timeStamp,
							nonceStr: jsSdk.nonceStr,
							package: jsSdk.package,
							signType: jsSdk.signType,
							paySign: jsSdk.paySign, // 支付签名
							success: (payRes) => {
								// 支付成功后的回调函数
								uni.navigateTo({
									url: '/pages/order/success?order_id=' + jsSdk
										.order_id
								});
							}
						});
					});
				})
			},
		}
	}
</script>

<style>

</style>
